<template>
  <el-table ref="table" :data="tableData" border max-height="330px">
    <template slot="empty">
      <NullData />
    </template>
    <el-table-column
      :label="$t('SEQUENCE')"
      align="center"
      type="index"
      :width="resetSize(65)"
      fixed="left"
    />
    <el-table-column
      :label="$t('EVENT_NAME')"
      prop="portName"
      min-width="150"
      align="left"
      show-overflow-tooltip
    >
      <template v-slot="scope">
        <div
          class="flex align-center"
          :style="{
            'color': colorList[scope.row.index]
          }"
        >
          <div
            class="event-label mr-5"
            :style="{
              'background-color': colorList[scope.row.index]
            }"
          />
          {{ scope.row.portName }}
        </div>
      </template>
    </el-table-column>
    <template v-for="i in tableHead">
      <el-table-column
        v-if="!i.showPage || (i.showPage && i.showPage === pageName) "
        :key="i.value"
        :label="$t(i.label)"
        :prop="i.value"
        :min-width="i.width"
        :align="i.align || 'left'"
        show-overflow-tooltip
      >
        <template slot="header">
          <span>{{ $t(i.label) }}</span>
          <el-popover v-if="i.tips" width="200" trigger="hover">
            <div class="text-color" v-html="$t(i.tips)" />
            <i
              slot="reference"
              class="iconfont icon-AFSwenhao text-color ml-5 font-weight-normal"
            />
          </el-popover>
        </template>
      </el-table-column>
    </template>
  </el-table>
</template>

<script>
  import { mapGetters } from 'vuex'
  import getThemeColor from '@/utils/themesColor'
  import { changeDecimal } from '@/utils/common'

  export default {
    props: {
      rowList: {
        type: Array,
        default: () => []
      },
      pageName: {
        type: String,
        default: 'single'
      },
      legendSelect: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        colorList: [
          getThemeColor('colorListColor1'),
          getThemeColor('colorListColor2'),
          getThemeColor('colorListColor3'),
          getThemeColor('colorListColor4')
        ],
        tableHead: [
          {
            label: 'EVENT_TYPE',
            value: 'eventTypeName',
            tips: 'EVENT_TYPE_TIPS',
            width: '130'
          },
          {
            label: 'POSITION',
            value: 'position',
            tips: 'POSITION_TIPS',
            width: '100'
          },
          {
            label: 'EVENT_LOSS',
            value: 'eventLoss',
            width: '130',
            tips: 'EVENT_LOSS_TIPS'
          },
          {
            label: 'REFLECTION_LOSS',
            value: 'refractRate',
            width: '160',
            tips: 'REFLECTION_LOSS_TIPS'
          },
          {
            label: 'LINK_LOSSD_B',
            value: 'linkLoss',
            width: '160',
            tips: 'LINK_LOSSD_B_TIPS'
          },
          {
            label: 'INTERVAL_LOSS',
            value: 'intervalLoss',
            tips: 'INTERVAL_LOSS_TIPS',
            width: '130',
            showPage: 'single'
          },
          {
            label: 'INTERVAL_AVERAGE_LOSS',
            value: 'intervalAverageLoss',
            tips: 'INTERVAL_AVERAGE_LOSS_TIPS',
            width: '180',
            showPage: 'single'
          }
        ]
      }
    },
    computed: {
      ...mapGetters(['dictMap']),
      eventList() {
        return this.rowList.map(i => i.eventList).flat().filter(i => this.legendSelect[i.portName])
      },
      tableData() {
        const tableData = this.eventList.map(i => {
          return {
            index: i.index,
            portName: i.portName,
            eventTypeName: this.getEventType(i.eventType),
            position: changeDecimal(i.position || 0),
            eventLoss: changeDecimal(i.eventLoss || 0),
            refractRate: changeDecimal(i.refractRate || 0),
            linkLoss: changeDecimal(i.linkLoss || 0),
            intervalLoss: changeDecimal(i.intervalLoss) || '-',
            intervalAverageLoss: changeDecimal(i.intervalAverageLoss) || '-'
          }
        })
        tableData.sort((a, b) => a.position - b.position)
        return tableData
      }
    },
    methods: {
      // 事件类型
      getEventType(type) {
        return type ? this.dictMap.OTDR_EVENT_TYPE[type] : ''
      }
    }
  }
</script>

<style scoped>
.event-label {
  width: 25px;
  height: 12px;
}
</style>
